<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务详情</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="../favicon.ico">
    <link rel="icon" type="image/png" href="../images/logo.png">
    
    <script src="../js/tailwindcss-3.4.17.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#10b981',
                        'primary-dark': '#059669',
                        secondary: '#3b82f6',
                        accent: '#f59e0b',
                        danger: '#ef4444',
                        neutral: '#f9fafb',
                        'text-primary': '#1f2937',
                        'text-secondary': '#6b7280'
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="../css/all.min.css">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body class="bg-neutral">
    <div class="container-app">
        <!-- 顶部导航栏 -->
        <header class="bg-white sticky top-0 z-10 border-b border-gray-100 shadow-soft">
            <div class="px-4 py-3 flex items-center gap-3">
                <button onclick="window.history.back()" class="w-8 h-8 rounded-lg hover:bg-gray-100 flex items-center justify-center transition-colors">
                    <i class="fa fa-arrow-left text-text-primary"></i>
                </button>
                <h1 class="text-base font-bold flex-1 text-text-primary">服务详情</h1>
                <button onclick="toggleFavorite()" class="w-8 h-8 rounded-lg hover:bg-gray-100 flex items-center justify-center transition-colors">
                    <i id="favorite-icon" class="fa fa-heart text-text-primary"></i>
                </button>
                <button onclick="shareService()" class="w-8 h-8 rounded-lg hover:bg-gray-100 flex items-center justify-center transition-colors">
                    <i class="fa fa-share-alt text-text-primary"></i>
                </button>
            </div>
        </header>
        
        <!-- 服务详情内容 -->
        <main class="pb-24">
            <!-- 宣传图片轮播 -->
            <div class="relative bg-black aspect-video">
                <img src="https://images.unsplash.com/photo-1625246333195-78d9c38ad449?w=800&h=450&fit=crop" 
                     alt="服务图片" class="w-full h-full object-cover" id="service-image">
                <div class="absolute bottom-3 right-3 px-2 py-1 bg-black/60 rounded text-white text-xs">
                    1 / 3
                </div>
            </div>
            
            <!-- 服务基本信息 -->
            <div class="card-modern m-4 p-4">
                <div class="flex items-start justify-between mb-3">
                    <div class="flex-1">
                        <h1 class="text-lg font-bold text-text-primary mb-2">专业农机服务 - 耕地播种一站式</h1>
                        <div class="flex items-center gap-2 mb-3">
                            <span class="text-xs px-2 py-1 bg-primary/10 text-primary rounded-lg font-medium">农机服务</span>
                            <span class="text-xs px-2 py-1 bg-amber-50 text-amber-600 rounded-lg font-medium">认证商家</span>
                        </div>
                        <p class="text-sm text-text-secondary mb-3">提供专业农机服务，包括耕地、播种、收割等全流程服务，设备先进，经验丰富</p>
                    </div>
                </div>
                
                <div class="flex items-center justify-between py-3 border-t border-gray-100">
                    <div class="text-2xl font-bold text-primary">¥200/亩起</div>
                    <div class="flex items-center gap-4 text-xs text-text-secondary">
                        <span><i class="fa fa-eye mr-1"></i>1.2k</span>
                        <span><i class="fa fa-heart mr-1"></i>86</span>
                    </div>
                </div>
            </div>
            
            <!-- 服务内容详情 -->
            <div class="card-modern m-4 p-4">
                <h2 class="text-base font-bold text-text-primary mb-3 flex items-center">
                    <i class="fa fa-file-text-o text-primary mr-2"></i>
                    服务内容
                </h2>
                <div class="text-sm text-text-secondary space-y-2 leading-relaxed">
                    <p>我们提供全方位的农机服务，专注于为农户提供高效、专业的农业机械化解决方案。</p>
                    
                    <p class="font-medium text-text-primary mt-3">服务项目包括：</p>
                    <ul class="list-disc list-inside space-y-1 ml-2">
                        <li>耕地翻土 - 采用大型拖拉机和深耕犁，耕作深度可达30cm</li>
                        <li>播种服务 - 精密播种机，确保种子均匀分布</li>
                        <li>收割服务 - 联合收割机，高效快捷</li>
                        <li>施肥服务 - 自动化施肥设备，精准控制用量</li>
                    </ul>
                    
                    <p class="font-medium text-text-primary mt-3">服务优势：</p>
                    <ul class="list-disc list-inside space-y-1 ml-2">
                        <li>设备先进 - 所有机械均为近3年内购置的新型设备</li>
                        <li>团队专业 - 操作人员均有5年以上工作经验</li>
                        <li>服务范围广 - 覆盖周边100公里范围</li>
                        <li>价格合理 - 明码标价，无隐藏收费</li>
                    </ul>
                    
                    <p class="font-medium text-text-primary mt-3">服务流程：</p>
                    <p>1. 联系我们进行需求咨询<br>
                    2. 实地勘察并制定作业方案<br>
                    3. 签订服务协议<br>
                    4. 按约定时间进场作业<br>
                    5. 作业完成验收付款</p>
                </div>
            </div>
            
            <!-- 服务地区 -->
            <div class="card-modern m-4 p-4">
                <h2 class="text-base font-bold text-text-primary mb-3 flex items-center">
                    <i class="fa fa-map-marker text-primary mr-2"></i>
                    服务地区
                </h2>
                <p class="text-sm text-text-secondary">浙江杭州及周边地区（余杭、临平、萧山、富阳等）</p>
            </div>
            
            <!-- 发布者信息 -->
            <div class="card-modern m-4 p-4">
                <h2 class="text-base font-bold text-text-primary mb-3 flex items-center">
                    <i class="fa fa-user-circle text-primary mr-2"></i>
                    联系方式
                </h2>
            <div class="space-y-3">
                    <div class="flex items-center justify-between p-3 bg-neutral rounded-xl">
                        <div class="flex items-center gap-3">
                            <i class="fa fa-user text-text-secondary"></i>
                            <div>
                                <div class="text-xs text-text-secondary">联系人</div>
                                <div class="text-sm font-medium text-text-primary">张**</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex items-center justify-between p-3 bg-neutral rounded-xl">
                        <div class="flex items-center gap-3">
                            <i class="fa fa-phone text-text-secondary"></i>
                            <div>
                                <div class="text-xs text-text-secondary">联系电话</div>
                                <div class="text-sm font-medium text-text-primary">138****5678</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex items-center justify-between p-3 bg-neutral rounded-xl">
                        <div class="flex items-center gap-3">
                            <i class="fa fa-clock-o text-text-secondary"></i>
                            <div>
                                <div class="text-xs text-text-secondary">发布时间</div>
                                <div class="text-sm font-medium text-text-primary">2024年12月10日 14:30</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-3 bg-amber-50 rounded-xl border border-amber-200">
                        <div class="flex items-start gap-2 text-xs text-amber-800">
                            <i class="fa fa-shield mt-0.5"></i>
                            <div>
                                <p class="font-medium mb-1">隐私保护提示</p>
                                <p class="text-amber-600">为保护双方隐私，联系方式已脱敏处理。点击"联系我"按钮并完成微信登录后可查看完整信息。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 相似服务推荐 -->
            <div class="m-4">
                <h2 class="text-base font-bold text-text-primary mb-3 flex items-center">
                    <i class="fa fa-th-large text-primary mr-2"></i>
                    相似服务推荐
                </h2>
                <div class="space-y-3">
                    <div class="card-modern p-3 hover:shadow-lg transition-all cursor-pointer" onclick="window.location.href='service-detail.html'">
                        <div class="flex gap-3">
                            <img src="https://images.unsplash.com/photo-1574943320219-553eb213f72d?w=80&h=80&fit=crop" 
                                 alt="服务图片" class="w-16 h-16 rounded-lg object-cover flex-shrink-0">
                            <div class="flex-1 min-w-0">
                                <h3 class="text-sm font-medium text-text-primary mb-1 truncate">农业机械租赁服务</h3>
                                <p class="text-xs text-text-secondary mb-1 truncate">提供各类农业机械租赁</p>
                                <div class="text-sm font-bold text-primary">¥150/天起</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        
        <!-- 底部操作栏 -->
        <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-gray-200 p-4 shadow-xl z-20">
            <div class="flex gap-3">
                <button onclick="window.location.href='../index.html'" class="px-4 py-3 border border-gray-200 rounded-xl hover:bg-gray-50 transition-colors">
                    <i class="fa fa-home text-text-secondary"></i>
                </button>
                <button onclick="window.location.href='service.html'" class="px-4 py-3 border border-gray-200 rounded-xl hover:bg-gray-50 transition-colors">
                    <i class="fa fa-list text-text-secondary"></i>
                </button>
                <button onclick="Components.showContactModal('张**', '138****5678')" class="flex-1 py-3 bg-primary hover:bg-primary-dark text-white rounded-xl font-medium transition-colors shadow-medium flex items-center justify-center gap-2">
                    <i class="fa fa-wechat"></i>
                    联系我
                </button>
            </div>
        </div>
    </div>
    
    
    <script src="../js/common.js"></script>
    <script src="../js/components.js"></script>
    <script src="../js/animate.js"></script>
    <script>
        // 收藏功能
        let isFavorited = false;
        function toggleFavorite() {
            isFavorited = !isFavorited;
            const icon = document.getElementById('favorite-icon');
            if (isFavorited) {
                icon.className = 'fa fa-heart text-danger';
            } else {
                icon.className = 'fa fa-heart text-text-primary';
            }
        }
        
        // 分享功能
        function shareService() {
            CommonUtils.showToast('分享功能开发中...', 'info');
        }
    </script>
</body>
</html>
